<html>
	<head>
		<title>Carnegie FS | Research</title>
		#{include 'html_head.html'/}
		<!--  For graphs: -->
		<script type="text/javascript" src="http://filamentgroup.github.com/EnhanceJS/enhance.js"></script>
		
		<script type="text/javascript">
			//Remove symbol from list
			var remove_symbol = function(key){
				$("#symbol_list").removeData(key);
				refresh_symbols();
			};
				
			//Refresh selected symbols for research
			var refresh_symbols = function(){
				//clear box
				$("#tags").val('');
				//clear symbol list
				$("#symbol_list").empty();
				//reload symbols
				$.each($("#symbol_list").data(), function(key, value){
					$("#symbol_list").append("<div class='keyword'>" + $("#symbol_list").data(key) + " <font color='#777'><a href='#' title='Remove' alt='Remove' onclick=\"remove_symbol('" + key + "')\">x</a></font></div>");
				});
			};
		
			$(document).ready(function() {
				//Autocomplete				
				//get list of symbols from controller
				var searchOptions = new Array(${symbols});
				$("#tags").autocomplete({
					minLength: 0,
					source: searchOptions,
					//when a symbol is selected from the helper list
					select: function(event, ui){
						//save selected symbol to data object
						$("#symbol_list").data(ui.item.value, ui.item.value);
						//display selected item
						refresh_symbols();
					}
				});
				
				var chart;
				var refresh_graph_click_count = 0;
				$.ajax({
					type: "POST",
					url: "/customer/getResearchData?symbol=APPL",
					dataType: "json",
					success: function(data){
						chart = new Highcharts.StockChart({
							chart : {
								renderTo : 'stock_graph'
							},
							rangeSelector : {
								selected : 1
							},
							title : {
								text : ''
							},							
							series : [{
								name : 'TEST', 
								data : data,
								tooltip: { yDecimals: 2	}							
							}]						
						});
						
						//Hide chart on page load
						$("#stock_graph").css("display", "none");
					},
					error: function(XMLHttpRequest, textStatus, errorThrown) {
						alert(textStatus);
					}
				});
				
				$("#btn").click(function(){
					while(chart.series.length > 0){
						chart.series[0].remove(true);
					}
					$("#stock_graph").css("display", "block");
					$.each($("#symbol_list").data(), function(key, value){
						$.getJSON("/customer/getResearchData?symbol=" + $("#symbol_list").data(key), function(data){
							chart.addSeries({
								name : $("#symbol_list").data(key) + "", 
								data : data,
								tooltip: { yDecimals: 2	}
							});
						});
					});
				});						
				
			});
		</script>
	</head>

	<body>
		<script type="text/javascript" src="/public/js/highstock.js"></script>
		<script type="text/javascript" src="/public/js/modules/exporting.js"></script>		
		<div id="container">		
			<!-- Page Header -->
			#{include 'header.html'/}
	
			<!-- Content Area -->
			<div id="content">				
				<a href="portfolio"><< Back to Portfolio</a>
				<div class="title">Market Research</div>
				<div class="clear"></div>				
				<div class="profile_item_lbl" style="display:inline">Lookup Market Data For: </div><input type="text" id="tags" style="display:inline" class="profile_item_value" name="tags" placeholder="Enter symbol" size="18" />
				<div class="clear"></div>
				<div id="symbol_list"></div>
				
				<div class="clear"></div>		
				
				<!--<div id="graph">Enter symbols into the search box above to start researching.</div>-->
				
				<button id="btn" class="button_black">Refresh Graph</button>
				
				<div id="stock_graph"></div>
			</div>
			
			<!-- Page Footer -->
			#{include 'footer.html'/}
		</div>
	</body>
</html>